<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .wrap {
                width: 500px;
                height: 335px;
                border: 2px solid gold;
                margin: 50px auto 0;
            }

            .box {
                height: 35px;
                overflow: hidden;
            }



            .box>div {
                width: 100px;
                box-sizing: border-box;
                height: 35px;
                line-height: 35px;
                text-align: center;
                float: left;
                background: cyan;
                color: blue;
                border: 2px solid red;
                cursor: pointer;
            }



        </style>
    </head>
    <body>

        <div class="wrap">
            <div class="box">
                <div>新闻</div>
                <div>娱乐</div>
                <div>音乐</div>
                <div>八卦</div>
                <div>我的</div>
            </div>
            <div id="content">
                
            </div>

        </div>        



        
    </body>
</html>
<script>
    
    var divs = document.querySelectorAll(".box>div");

    console.dir(divs);

    var contents = ["新闻", "娱乐", "音乐", "八卦", "我的"];

    var contentDiv = document.getElementById('content');

    divs.forEach(function(ele, i) {
        console.log(ele, i);

        // 给元素添加点击事件
        ele.onclick = function() {
            // console.log(this);

            divs.forEach(function(ele) {
                ele.style.background = "cyan";
                ele.style.color = "blue";
                ele.style.border = "2px solid red";
            });


            this.style.background = "red";
            this.style.color = "white";
            this.style.border = "2px solid cyan";

            contentDiv.innerHTML = contents[i];
            // console.log(i);

        };

    });



    // for (var i = 0; i < divs.length; i++) {
    //     (function(i) {

    //         divs[i].onclick = function() {
    //             console.log(i);
    //         };

    //     })(i);
    // }



</script>



